<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Dropdown Menu with Scriptaculous/Prototype</title>
		 <link rel="stylesheet" href="../style.css" type="text/css" media="screen" />
		<script src="prototype.js" type="text/javascript"></script>
		<script src="scriptaculous.js" type="text/javascript"></script>
		<script src="effects.js" type="text/javascript"></script>

		<link href="menu.css" rel="stylesheet" type="text/css" />
		<script src="menu.js" type="text/javascript"></script>

		<style type="text/css">
		body {
		  background: #ffffff;
		  margin: 0px;
		  padding: 0px;
		  color: #000000;
		  font-family: Verdana;
		}
		</style>


	</head>
	<body>
		<br />

		<div id="menu">
		<ul class="level1" id="root">
		  <li>
		    <a href="#">Top One</a>
		    <ul class="level2">
		      <li><a href="#">Sub A</a></li>
		      <li>
		        <a href="#" onclick="$('appear_demo').appear(); return false;">Sub B</a>
		        <ul class="level3" id="appear_demo">
		          <li><a href="#">Level 3 One</a></li>
		          <li><a href="#">Level 3 Two</a></li>
		          <li><a href="#">Level 3 Three</a></li>
		        </ul>
		      </li>
		      <li><a href="#">Sub C</a></li>
		      <li>
		        <a href="#">Sub D</a>
		        <ul class="level3">
		          <li><a href="#">Level 3 AAA</a></li>
		          <li><a href="#">Level 3 BBB</a></li>
		          <li><a href="#">Level 3 CCC</a></li>
		          <li><a href="#">Level 3 EEE</a></li>
		        </ul>
		      </li>
		    </ul>
		  </li>
		  <li><a href="#">Top Two</a></li>
		  <li><a href="#">Top Three</a></li>
		  <li>
		    <a href="#">Top Four</a>
		    <ul class="level2">
		      <li><a href="#">Sub A</a></li>
		      <li>
		        <a href="#">Sub B</a>
		        <ul class="level3">
		          <li><a href="#">Level 3 One</a><ul class="level3">
		          <li><a href="#">Level 3 One</a></li>
		          <li><a href="#">Level 3 Two</a></li>
		          <li><a href="#">Level 3 Three</a></li>
		        </ul></li>
		          
		          <li><a href="#">Level 3 Two</a></li>
		          <li><a href="#">Level 3 Three</a></li>
		        </ul>
		        
		      </li>
		      <li><a href="#">Sub C</a></li>
		      <li><a href="#">Sub D</a></li>
		    </ul>
		  </li>
		  <li><a href="#">Top Five</a></li>
		</ul>
		</div>

	</body>
</html>
